<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的博文</title>
    <link th:href="@{/js/el/element.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <div class="a2">
            <template>
                <el-table
                        :data="blogs"
                        style="width: 100%">
                    <el-table-column>
                        <template slot-scope="scope">
                            <div style="display: flex;justify-content: space-between;
                                     background-color: lightblue">
                                <span>标题:{{scope.row.title}}</span>
                                <span>作者:{{scope.row.author}}</span>
                                <span>发表时间:{{scope.row.time}}</span>
                            </div>

                            <div style="margin-top: 10px">
                                <span>{{scope.row.digest}}</span>
                            </div>

                            <div style="display: flex;justify-content:space-between;margin-top: 10px ">
                                <span>浏览次数:</span>
                                <el-button type="text" @click="details(scope.row.id)">阅读全文</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <el-pagination
                    background
                    :page-size="num"
                    @current-change="pageChange"
                    :current-page="start"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            input:"",
            start:1,
            total:0,
            num:5,
            blogs:[],
        },
        methods:{
            pageChange(start){
                var _this = this;
                console.log(start)
                axios.get("/api/user/findByPage2/"+ start +"/"+this.num)
                    .then(function (resp) {
                        console.log(resp.data)
                        _this.blogs = resp.data.blogs;
                        _this.total = resp.data.total;
                })
            },
            //请求去详情页
            details(blogid){
                console.log(blogid)
                window.location.href="/api/public/blogs/details/"+blogid
            }
        },
        mounted: function(){
            var _this = this;
            axios.get("/api/user/findByPage2/"+this.start+"/"+this.num)
                .then(function (resp) {
                    console.log(resp.data)
                    _this.blogs = resp.data.blogs;
                    _this.total = resp.data.total;
                })
        }
    })
</script>
<style>
    .a2{
        border: 1px solid #000000;
        width: 100vw;
        height: 1000px;
        margin-top: 6px;
    }
</style>
</html>